<template>
    <div class="total">
      <header class="header">
          <img src="../../assets/images/logo.png" class="logo" @click="HomePage">
          <h3 class="title">三板村政务信息</h3>
      </header>
      <el-table
          :data="tableData"
          stripe
          style="width: 80%; margin: 10px auto; border-radius: 8px; box-shadow: 4px 6px 3px 0px rgba(0,0,0,0.3);  "
          :header-cell-style="headerCellClassName">
          <el-table-column
          prop="date"
          label="日期"
          width="450">
          </el-table-column>
          <el-table-column
          prop="name"
          label="名称"
          width="auto">
          <template slot-scope="scope">  
              <!-- 使用 a 标签包裹内容，并添加 href 属性来指定跳转链接 -->  
              <a :href="scope.row.linkUrl" target="_blank">  
              {{ scope.row.name }}  
              </a>  
        </template> 
          </el-table-column>
      </el-table>
  
      <div class="foot">
          <span>XXX提供技术支持</span>
      </div>
      <Foot></Foot>
  
      </div>
  </template>
  
  <script>
  import Foot from '@/components/Footer'
  export default {
      name: 'MyData',
      components:{
          Foot
      },
      data() {
          return {
              tableData:[
                  {
                      date:'2024-05-26',
                      name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河',
                      linkUrl: 'https://baijiahao.baidu.com/s?id=1800082468477506722&wfr=spider&for=pc'
                  },
                  {
                      date:'2024-05-26',
                      name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                  },
                  {
                      date:'2024-05-26',
                      name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                  },
                  {
                      date:'2024-05-26',
                      name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                  },
                  {
                      date:'2024-05-26',
                      name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                  },
                  {
                      date:'2024-05-26',
                      name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                  },
                  {
                      date:'2024-05-26',
                      name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                  },
                  {
                      date:'2024-05-26',
                      name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                  },
                  {
                      date:'2024-05-26',
                      name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                  },
                  {
                      date:'2024-05-26',
                      name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                  },
                  {
                      date:'2024-05-26',
                      name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                  },
                  {
                      date:'2024-05-26',
                      name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                  },
                  {
                      date:'2024-05-26',
                      name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                  },
                  {
                      date:'2024-05-26',
                      name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                  },
                  {
                      date:'2024-05-26',
                      name:'珠海金湾红旗镇乡村龙舟赛开赛，16条“猛龙”龙舟竞逐三板河'
                  },
              ]
          }
      },
      methods:{
          HomePage(){
              this.$router.push('/home')
          },
          headerCellClassName() {  
              return 'background-color: #ececec;' 
          },
      }
  }
  </script>
  
  <style lang="scss" scoped>
  .total{
      padding: 0;
      margin: 0;
      height: auto;
      width: 100%;
      background: url(../../assets/images/green.png) no-repeat fixed;
      background-size: cover;
  }
  a{
      color: red;
      text-decoration: none;
  }
  a:hover{
      color: skyblue;
  }
  .header{
      top: 0;
      height: 100px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
  
      .logo{
          width: 250px;
          height: auto;
          margin-left: 3%;
      }
  
      .title{
          margin: 0 auto;
          margin-right: 40%;
          font-size: 2.25rem;
          color: #666;
      }
  }
  .foot{
    width: 100%;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    color: rgb(117, 134, 151);;
  }
  </style>